<template>
  <div>
    <draggable
      class="list-wrap"
      v-model="changeImageList"
      :options="dragOptions"
      @start="drag = true"
      @end="dragEnd"
    >
      <transition-group tag="ul">
        <li
          class="demo-upload-list"
          v-for="(item, index) in changeImageList"
          :key="index"
        >
          <img :src="getImgUrlFn(item.url)" />
          <div class="demo-upload-list-cover">
            <Icon
              type="ios-eye-outline"
              @click.native="handleView(item.url)"
            ></Icon>
            <Icon
              type="ios-trash-outline"
              class="outline"
              @click.native="handleRemove(index)"
            ></Icon>
          </div>
        </li>
      </transition-group>
    </draggable>
    <!-- <div
      class="demo-upload-list"
      v-for="(item, index) in changeImageList"
      :key="index"
    >
      <img :src="getImgUrlFn(item.url)" />
      <div class="demo-upload-list-cover">
        <Icon
          type="ios-eye-outline"
          @click.native="handleView(item.url)"
        ></Icon>
        <Icon
          type="ios-trash-outline"
          class="outline"
          @click.native="handleRemove(index)"
        ></Icon>
      </div>
    </div> -->
    <div
      class="photo"
      v-show="changeImageList.length < maxlength ? true : false"
      @click="handleShowModal"
    >
      <Icon style="font-size: 20px; font-weight: bold" type="md-add" />
    </div>
    <Modal title="大图展示" v-model="visible">
      <img :src="getImgUrlFn(imgUrl)" v-show="visible" style="width: 100%" />
    </Modal>
    <Modal
      title="选择图片"
      :fullscreen="true"
      v-model="showchange"
      @on-ok="toParent"
    >
      <Row type="flex">
        <Col
          style="border-right: 1px solid #cccccc; min-height: 500px"
          span="4"
        >
          <div class="ColTitle">图片目录</div>
          <!-- <Col class="col-line">1111</Col> -->
          <Tree :data="nodesList" @on-select-change="treeSelectChange"></Tree>
          <Spin size="large" fix v-if="treeSpinShow"></Spin>
        </Col>
        <Col
          style="
            padding-left: 20px;
            border-right: 1px solid #cccccc;
            min-height: 500px;
          "
          span="14"
        >
          <div class="ColTitle">图片库</div>
          <div
            class="demo-upload-list"
            v-for="(item, index) in imgList"
            :key="index"
          >
            <img :src="item.url" />
            <div class="demo-upload-list-cover">
              <Icon
                type="ios-eye-outline"
                @click.native="handleView(item.url)"
              ></Icon>
              <Icon type="md-checkmark" @click.native="handlePhoto(item)" />
            </div>
          </div>
          <Spin size="large" fix v-if="spinShow"></Spin>
        </Col>
        <Col style="padding-left: 20px" span="6">
          <div class="ColTitle">已选图片</div>
          <div
            class="demo-upload-list"
            v-for="(item, index) in changeImageList"
            :key="index"
          >
            <img :src="getImgUrlFn(item.url)" />
            <div class="demo-upload-list-cover">
              <Icon
                type="ios-trash-outline"
                class="outline"
                @click.native="handleRemove(index)"
              ></Icon>
            </div>
          </div>
        </Col>
      </Row>
    </Modal>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import { ApiRequest } from '@api/basePage';
export default {
  components: {
    draggable
  },
  props: {
    maxlength: {
      type: Number
    },
    defaultList: {
      type: Array
    }
  },
  data () {
    return {
      visible: false,
      showchange: false,
      treeSpinShow: false,
      spinShow: false,
      nowPage: 1, // 当前页
      totalNum: 0, // 总条数
      pageShow: 10, // 每页展示条数
      imgUrl: '',
      nodesList: [],
      photoList: [],
      changeImageList: [], // 图片库选择的图片
      imgList: [],
      photoGalleryList: [], // 图片库去除本地图片
      drag: false
    };
  },
  watch: {
    defaultList (n, o) {
      console.log(n);
      this.changeImageList = n;
      this.photoGalleryList = _.filter(n, (item) => {
        return (
          item.url.indexOf('https://fsyuncai.oss-cn-beijing.aliyuncs.com') != -1
        );
      });
    }
  },
  computed: {
    dragOptions () {
      return {
        animation: 200,
        group: 'description',
        disabled: false,
        ghostClass: 'ghost'
      };
    },
  },
  mounted () {},
  created () {},
  methods: {
    /* 获取图片路径 */
    getImgUrlFn (url) {
      if (url) {
        let start = 'https://fsyuncai.oss-cn-beijing.aliyuncs.com';
        let end = '?x-oss-process=style/marking_text';
        let result = url.indexOf(start) == -1 ? start + url + end : url;
        return result;
      }
    },
    // 获取目录
    getNodes () {
      let data = {
        key: '-1'
      };
      this.treeSpinShow = true;
      ApiRequest(
        '/sysback/platimagecategory/getNodes',
        'post',
        data,
        true
      ).then((res) => {
        if (res.retStatus === '1') {
          if (res.retData !== '' && res.retData !== []) {
            this.nodesList = res.retData;
            this.treeSpinShow = false;
          }
        }
      });
    },

    // 展示弹窗
    handleShowModal () {
      this.showchange = true;
      this.getNodes();
    },

    // 点击 树  获取  图片列表
    treeSelectChange (arr, item) {
      this.spinShow = true;
      let data = {
        categoryUuid: item.key,
        nowPage: this.nowPage,
        pageShow: this.pageShow
      };
      ApiRequest(
        '/sysback/platimagelibrary/toImageList',
        'post',
        data,
        true
      ).then((res) => {
        if (res.retStatus === '1') {
          if (res.retData !== '') {
            this.imgList = res.retData.results.map((item) => ({
              ...item,
              url: `${this.IMAGEURL}${item.imageKey}?${this.XOSSPROCE}`
            }));
          }
        }
        this.spinShow = false;
      });
    },
    // 预览图片
    handleView (url) {
      this.imgUrl = url;
      this.visible = true;
    },
    // 移除图片
    handleRemove (index) {
      this.changeImageList.splice(index, 1);
      this.$emit('child-imglist', this.changeImageList);
    },
    handlePhoto (item) {
      if (this.changeImageList.length >= this.maxlength) {
        this.$Message.warning('图片数量不能大于' + this.maxlength + '张');
        return;
      }
      this.changeImageList.push(item);
    },
    toParent () {
      console.log(this.changeImageList);
      this.$emit('child-imglist', this.changeImageList);
    },
    dragEnd () {
      this.drag = false;
      this.$emit('child-imglist', this.changeImageList);
    },
  }
};
</script>

<style lang="less" scoped>
.list-wrap {
  float: left;
}
.photo {
  display: inline-block;
  width: 120px;
  height: 120px;
  line-height: 120px;
  background: #fff;
  border: 1px dashed #dcdee2;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.outline {
  margin-left: 20px !important;
}

.demo-upload-list {
  display: inline-block;
  width: 120px;
  height: 120px;
  text-align: center;
  line-height: 120px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}

.ColTitle {
  height: 50px;
  line-height: 50px;
  font-size: 18px;
}

.col-line {
  padding-left: 15px;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
}
</style>
